<template>
  <div class="login" clearfix>
    <div class="login-wrap">
      <el-form
        ref="userModel"
        :model="userModel"
        :rules="validateFormRules"
        status-icon
        label-width="80px"
      >
        <h3>登录</h3>
        <hr />
        <el-form-item label="登录方式">
          <el-radio v-model="userModel.mode" label="mobile">手机</el-radio>
          <el-radio v-model="userModel.mode" label="email">邮箱</el-radio>
        </el-form-item>
        <el-form-item
          :prop="userModel.mode"
          :label="userModel.mode"
          >
          <el-input
            v-model="userModel.mobile"
            v-show="userModel.mode == 'mobile'"
            placeholder="手机号"
            prefix-icon
          ></el-input>
             <el-input
            v-model="userModel.email"
            v-show="userModel.mode == 'email'"
            placeholder="邮箱"
            prefix-icon
          ></el-input>
        </el-form-item>
        <el-form-item id="password" prop="password" label="密码">
          <el-input
            v-model="userModel.password"
            show-password
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code" style="margin-top:5%;" label="验证码">
          <el-input
            v-model="userModel.code"
            style="width:40%;"
            placeholder="请输入验证码"
          ></el-input>
          <el-button
            style="width:35%;margin-left:10%;"
            v-show="canGetCode"
            @click="getCode()"
            type="primary"
            >发送验证码</el-button
          >
          <el-button
            style="width:35%;margin-left:10%;"
            v-show="!canGetCode"
            type="primary"
            disabled
            >{{ codeReGetTime }} s</el-button
          >
        </el-form-item>
        <el-form-item style="margin-top:5%">
          <el-button
            type="primary"
            style="width:50%;"
            icon="el-icon-upload"
            @click="doLogin('userModel')"
            >登 录</el-button
          >
          <router-link to="/regist">
            <el-button
              type="success"
              style="width:50%;margin-left:5%"
              icon="el-icon-upload"
              >注册账号</el-button
            ></router-link
          >
        </el-form-item>
        <el-form-item style="margin-top:5%">
          <router-link to="/">
            <el-button style="width:30%" type="info"
              >返回首页</el-button
            ></router-link
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import store from "../../store";
import { sendValidateCode } from "../../api/User/user";
export default {
  name: "login",
  data() {
    return {
      userModel: {
        mobile: "",
        email: "",
        password: "",
        mode: "mobile",
        code: "",
      },
      validateFormRules: {
        password: [
          { required: true, message: "密码不可为空", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "邮箱不可为空", trigger: "blur" },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "邮箱不符合要求",
            trigger: "blur",
          },
        ],
        mobile: [
          { required: true, message: "电话不可为空", trigger: "blur" },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: "电话不符合要求",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "验证码不可为空", trigger: "blur" }],
      },
      codeReGetTime: "",
      timer: null,
      canGetCode: true,
    };
  },
  created() {},
  methods: {
    doLogin(userModel) {
      var _this = this;
      this.$refs[userModel].validate((valid) => {
        if (valid) {
          _this.$store
            .dispatch("Login", this.userModel)
            .then(() => {
              this.$router.push({ path: "/" });
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          _this.$message.error("请将表单信息填写完整");
        }
      });
    },
    getCode() {
      const TIME_COUNT = 60;
      var _this = this;
      let receiver =
        this.userModel.mode == "mobile"
          ? this.userModel.mobile
          : this.userModel.email.slice(0, -4);
      if (receiver == "") {
        this.$message.error("请输入手机号或邮箱！");
        return;
      }
     sendValidateCode(this.userModel.mode, receiver).then((res) => {
        if (res.flag) {
          if (!_this.timer) {
            _this.codeReGetTime = TIME_COUNT;
            _this.canGetCode = false;
            _this.timer = setInterval(() => {
              if (
                _this.codeReGetTime > 0 &&
                _this.codeReGetTime <= TIME_COUNT
              ) {
                _this.codeReGetTime--;
              } else {
                _this.canGetCode = true;
                clearInterval(this.timer);
                _this.timer = null;
              }
            }, 1000);
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.login {
  margin-top: 5%;
  width: 100%;
  height: 740px;
  background: url("../../assets/R-C.jpg") no-repeat;
  background-size: cover;
  overflow: hidden;
}
.login-wrap {
  background: url("") no-repeat;
  background-size: cover;
  width: 400px;
  height: 500px;
  margin: 8% auto;
  overflow: hidden;
  padding-top: 10px;
  line-height: 40px;
}
#password {
  margin-bottom: 5px;
}
h3 {
  color: #0babeab8;
  font-size: 24px;
}
hr {
  background-color: #444;
  margin: 20px auto;
}
a {
  text-decoration: none;
  color: #aaa;
  font-size: 15px;
}
a:hover {
  color: coral;
}
.el-button {
  width: 80%;
  margin-left: -50px;
}
</style>
